<template>
  <div class="workflow-file-tree">
    <div class="file-tree-header">
      <h3>工作流列表</h3>
      <el-button type="primary" size="small" @click="createNewWorkflow">
        <el-icon>
          <Plus/>
        </el-icon>
        新建工作流
      </el-button>
    </div>

    <el-tree
        :data="workflowFiles"
        :props="defaultProps"
        @node-click="handleNodeClick"
        default-expand-all
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-icon>
            <Document/>
          </el-icon>
          <span>{{ node.label }}</span>
          <div class="node-actions" v-if="data.type === 'workflow'">
            <el-button type="primary" link @click.stop="renameWorkflow(data)">
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
            <el-button type="primary" link @click.stop="deleteWorkflow(data)">
              <el-icon>
                <Delete/>
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue';
import {useWorkflowStore} from '@/store/workflow';
import {ElMessageBox, ElMessage} from 'element-plus';
import {Document, Edit, Delete, Plus} from '@element-plus/icons-vue';

const workflowStore = useWorkflowStore();

// 工作流文件树数据
const workflowFiles = computed(() => {
  const workflows = workflowStore.workflows.map(workflow => ({
    id: workflow.id,
    label: workflow.name,
    type: 'workflow'
  }));

  return [
    {
      id: 'root',
      label: '我的工作流',
      children: workflows
    }
  ];
});

const defaultProps = {
  children: 'children',
  label: 'label'
};

// 处理节点点击
const handleNodeClick = (data) => {
  if (data.type === 'workflow') {
    workflowStore.loadWorkflow(data.id);
  }
}

// 创建新工作流
const createNewWorkflow = () => {
  ElMessageBox.prompt('请输入工作流名称', '新建工作流', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S+/,
    inputErrorMessage: '名称不能为空'
  }).then(({value}) => {
    workflowStore.createWorkflow(value);
    ElMessage.success(`工作流 "${value}" 创建成功`);
  }).catch(() => {
  });
}

// 重命名工作流
const renameWorkflow = (data) => {
  ElMessageBox.prompt('请输入新的工作流名称', '重命名工作流', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S+/,
    inputErrorMessage: '名称不能为空',
    inputValue: data.label
  }).then(({value}) => {
    workflowStore.renameWorkflow(data.id, value);
    ElMessage.success(`工作流已重命名为 "${value}"`);
  }).catch(() => {
  });
}

// 删除工作流
const deleteWorkflow = (data) => {
  ElMessageBox.confirm(
      `确定要删除工作流 "${data.label}" 吗？此操作不可恢复。`,
      '删除工作流',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    workflowStore.deleteWorkflow(data.id);
    ElMessage.success('工作流已删除');
  }).catch(() => {
  });
}
</script>

<style scoped>
.workflow-file-tree {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.file-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.file-tree-header h3 {
  margin: 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-node .el-icon {
  margin-right: 8px;
  color: #909399;
}

.node-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.custom-tree-node:hover .node-actions {
  opacity: 1;
}
</style>